/*
 * @Description: 导航页
 * @Author: shuaishuai.wang
 * @Date: 2019-07-10 14:08:44
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-07-18 11:20:34
 */
<template>
  <div class="main">
    <title-bar titleText='站点导航'></title-bar>
    <div class="main_area">
      <div id="amap"></div>
      <div
        class="get_my_position"
        @click="getMyPosition"
      >
        <i class="iconfont icon-mypoint fontsize44"></i>
      </div>
      <div class="info">
        <div class="basic_info flex-h flex-vc">
          <img src="./assets/logo-jd.png" />
          <div class="address">
            <h3>上海嘉定汽车综合检测站有限公司</h3>
            <p>上海市嘉定区徐行镇宝凤路518号<i
                class="iconfont icon-go-to-here"
                @click="goToHere"
              ></i></p>
          </div>
        </div>
        <div class="other_info">
          <p>电话：021-39978958（营业厅）</p>
          <p>传真：021-39978758</p>
          <p>邮编：201809</p>
          <p>邮箱：jdqczhjcz@126.com</p>
        </div>
        <div class="btn">
          <button
            @click="goToLayout"
            class="fontsize32"
          >站内布局</button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { TitleBar } from 'vue-xb-ui-depot'
import AMap from 'AMap'
import { getCurrentPosition, AppRouterUtils } from 'vue-xiaobu-utils'
export default {
  components: {
    TitleBar
  },
  data() {
    return {
      AMap: ''
    }
  },
  mounted() {
    this.AMap = new AMap.Map('amap', {
      zoom: 16, // 级别
      resizeEnable: true,
      center: [121.291676, 31.435836] // 中心点坐标，现在默认在嘉定汽车综合检查站有限公司
    })
    var marker = new AMap.Marker({
      position: new AMap.LngLat(121.291676, 31.435836),
      icon: require('./assets/position.png'), // 添加 Icon 图标 URL
      title: '上海嘉定汽车综合检测站有限公司'
    })

    this.AMap.add(marker)
    /* AMap.plugin('AMap.Geolocation', function () {
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 10000, // 超过10秒后停止定位，默认：5s
        showButton: true, // 定位按钮不显示
        zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
      })
      amap.addControl(geolocation)
      geolocation.getCurrentPosition(function (status, result) {
        if (status === 'complete') { } else { }
      })
    }) */
  },
  methods: {
    goToHere() {
      this.$ThirdParty.then(ThirdParty => {
        ThirdParty.selectMap(() => {

        },
        () => {

        },
        '31.435836',
        '121.291676',
        '上海嘉定汽车综合检测站有限公司'
        )
      })
    },
    goToLayout() {
      AppRouterUtils.open('vehicleLayout.html?_tv=false&_rv=false')
    },
    async getMyPosition() {
      let pos = await getCurrentPosition(this)
      this.AMap.setCenter([pos.longitude, pos.latitude])
      var marker = new AMap.Marker({
        position: new AMap.LngLat(pos.longitude, pos.latitude),
        icon: require('./assets/my_position.png'), // 添加 Icon 图标 URL
        title: '我的位置'
      })

      this.AMap.add(marker)
    }
  }
}
</script>

<style lang="scss" scope>
@import './../common.scss';
.main {
  height: 100%;
  position: relative;
  background-color: $bgColorDiv;
  min-height: fill-available;
  font-size: 16px; /*no*/
  font-weight: 400;
  overflow: hidden;
  .main_area {
    height: 100%;
    -webkit-overflow-scrolling: touch;
    #amap {
      // 高德地图区域
      width: 750px;
      height: calc(100% - 600px);
      .amap-logo {
        // 隐藏左下角高德logo
        display: none !important;
      }
      .amap-copyright {
        // 隐藏左下角高德提示文字
        display: none !important;
      }
    }
    .get_my_position {
      position: relative;
      width: 80px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      background-color: #fff;
      border-radius: 25px; /*no*/
      margin-top: -112px;
      margin-left: 638px;
      i {
        color: $themeColors;
      }
    }
    .info {
      height: 600px;
      padding: 0 30px;
      border-radius: 4px 4px 0 0; /*no*/
      // box-shadow: 0px 2px 8px 4px rgba(204, 204, 204, 1); /*no*/
      background-color: $bgColorDiv;
      overflow: auto;
      .basic_info {
        padding-top: 32px;
        margin-top: 32px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc; /*no*/
        img {
          width: 80px;
          height: 80px;
          margin-right: 34px;
          border-radius: 4px; /*no*/
        }
        .address {
          width: 506px;
          h3 {
            height: 48px;
            color: rgba(0, 0, 0, 0.87);
            line-height: 48px;
          }
          p {
            height: 40px;
            font-size: 14px; /*no*/
            color: rgba(0, 0, 0, 0.54);
            line-height: 40px;
            i {
              color: $themeColors;
              margin-left: 10px;
            }
          }
        }
        button {
          padding: 6px 10px;
          color: $fontColorWhite;
          border: 0;
          background-color: $themeColors;
          border-radius: 8px; /*no*/
        }
      }
      .other_info {
        p {
          margin-top: 16px;
        }
      }
    }
    .btn {
      width: 688px;
      height: 78px;
      margin: 55px 0;
      button {
        width: 688px;
        height: 78px;
        color: $fontColorWhite;
        background-color: $themeColors;
        border-radius: 25px; /*no*/
        display: block;
        border: 0;
        font-size: 15px; /*no*/
      }
    }
  }
}
</style>
